<template>
    <div>
        <van-sticky>
            <van-nav-bar title="购物车" z-index="1">
                <template #left>
                    <van-icon color="gray" name="arrow-left" size="20" @click="$router.back()" />
                    <van-icon color="gray" name="wap-home-o" size="20" @click="goto('/home')"
                        style="margin-right: 80px" />
                    <van-icon name="location-o" size="16" color="gray" @click="chooseLocation" />
                </template>
                <template #right>
                    <van-icon size="14" @click="editable = !editable" color="gray">编辑</van-icon>
                </template>
            </van-nav-bar>
        </van-sticky>
        <div class="item_card">
            <van-card v-for="(item, index) in cartlist" :key="index" :num="item.qty" :price="item.price / 100"
                :title="item.name">
                <template #thumb>
                    <van-row>
                        <van-col span="8">
                            <van-checkbox style="margin-top: 33px" :value="selectIds.includes(item.id)"
                                @click="selectItem(item.id)">
                            </van-checkbox>
                        </van-col>

                        <van-col span="16">
                            <van-image width="60" height="60" :src="item.mainImage" @click="gotoDetail(item.id)" />
                        </van-col>
                    </van-row>
                </template>
                <template #num>
                    <van-stepper theme="round" button-size="22" disable-input v-model="item.qty"
                        @change="changeQty(item.id,$event)" />
                </template>
            </van-card>
            <p v-show="cartlistShow" class="tip" v-model='cartTip'>
                您的购物车还是空的哦，赶紧去挑选喜欢的商品吧(*╹▽╹*)
            </p>
        </div>
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll">全选</van-checkbox>
            <template #button v-if="editable">
                <van-button type="danger" icon="delete-o" round style="width: 110px" @click="removeItem">删除</van-button>
            </template>
        </van-submit-bar>

        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkAll">全选</van-checkbox>
            <template #button v-if="editable">
                <van-button type="danger" icon="delete-o" round style="width: 110px" @click="removeItem">删除</van-button>
            </template>
        </van-submit-bar>
    </div>
    </div>
</template>
<script>
    export default {
        name: "Cart",
        data() {
            // let cartlist = JSON.parse(localStorage.getItem("cartlist")) || [];
            return {
                editable: false,
                selectIds: [],
                // cartlist,
                cartlistShow: false,
                selectShop: [],
            };
        },
        computed: {
            cartlist() {
                return this.$store.state.cart.cartlist;
            },

            totalPrice() {
                return this.selectShop.reduce((val, item) => {
                    // val: 每一次遍历的返回值
                    return val + item.price * item.qty;
                }, 0);
            },
            checkAll: {
                get() {
                    return this.cartlist.every((item) => {
                        return this.selectIds.includes(item.id);
                    });
                },
                set(checked) {
                    console.log("checked", checked);
                    this.selectIds = checked ? this.cartlist.map((item) => item.id) : [];
                    this.selectShop = this.cartlist.filter((item) => {
                        return this.selectIds.includes(item.id);
                    });
                    localStorage.setItem('selectShop', JSON.stringify(this.selectShop));
                },
            },

            cartTip() {
                if (this.cartlist.length <= 0) {
                    this.cartlistShow = true;
                }
            },
        },
        created() {
            this.$parent.showTabbar = false;
        },
        destroyed() {
            // this.$parent.showTabbar = true;
        },
        methods: {
            chooseLocation() { },
            onSubmit() {
                this.$router.push("/order");
            },
            selectItem(id) {
                const idx = this.selectIds.indexOf(id);
                if (idx >= 0) {
                    this.selectIds.splice(idx, 1);
                } else {
                    this.selectIds.push(id);
                }
                this.selectShop = this.cartlist.filter((item) => {
                    return this.selectIds.includes(item.id);
                });
                localStorage.setItem('selectShop', JSON.stringify(this.selectShop));
            },
            removeItem() {
                if (this.selectIds.length === 0) {
                    this.$toast("请选择商品");
                    return;
                }
                // this.cartlist = this.cartlist.filter((item) => {
                //     return !this.selectIds.includes(item.id);
                // });
                this.$store.commit("removeFromCart", this.selectIds);
                this.selectIds = [];

                // 更新本地存储数据
                // localStorage.setItem("cartlist", JSON.stringify(this.cartlist));
                this.editable = !this.editable;
                this.selectShop = [];
            },
            changeQty(id, qty) {
                console.log("Cart.changeQty");
                this.$store.commit("changeQty", { id, qty });
            },
            goto(url) {
                this.$router.push(url);
            },
            gotoDetail(id) {

                // this.$router.push('/goodsdetails/'+id)
                this.$router.push({
                    name: 'Goodsdetails',
                    params: {
                        id
                    }
                })
            },
        },
    };
</script>
<style scoped>
    .dw {
        display: inline-block;
    }

    .item_card {
        margin-bottom: 80px;
    }

    .tip {
        color: rgb(189, 112, 112);
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        top: 50%;
        left: 50%;
        font-size: 12px;
        text-align: center;
    }
</style>